<template>
    <div style="width: 100%;height: 460px">
        <el-tooltip
            effect="dark"
            :content="tooltipContent"
            placement="top"
        >
            <el-button
                style="margin-bottom: 15px"
                type="primary"
                icon="el-icon-picture-outline-round"
                circle
                @click="changeViewData"
            />
        </el-tooltip>

        <el-select
            v-if=!isView
            v-model="proId"
            filterable
            style="width: 360px"
            clearable
            @change="getPro"
            placeholder="试试搜索吧~">
            <el-option-group
                v-for="group in proOptions"
                :key="group.professionalTypeName"
                :label="group.professionalTypeName">
                <el-option
                    v-for="item in group.professions"
                    :key="item.proName"
                    :label="item.proName"
                    :value="item.proId">
                </el-option>
            </el-option-group>
        </el-select>

        <el-select
            v-if=isView
            v-model="classId"
            style="width: 360px"
            filterable
            @change="getClass"
            clearable
            placeholder="试试搜索吧~">
            <el-option
                v-for="item in classOptions"
                :key="item.className"
                :label="item.className"
                :value="item.classId">
            </el-option>
        </el-select>

        <v-chart
            :options="polar"
            autoresize
            id="UnemployedRate"
            ref="UnemployedRate"
            style="height: 80%;width: 100%"
        ></v-chart>
    </div>
</template>

<script>
    export default {
        name: 'UnemployedRate',
        data () {
            return {
                polar: {},
                isView: true,
                placeholder: '试试搜索专业名称吧',
                tooltipContent: '切换到班级数据显示',
                cascaderOptions: [], // 专业班级联动菜单数据
                cascaderValues: [], // 专业班级联动菜单值
                classOptions: [],
                proOptions: [],
                classId: '',
                proId: '',
                type: 'getPro', // 获取数据的类型,
                employed: 0,
                noEmployed: 0,
                enlist: 0,
                attendSchool: 0,
                upgradeSpecialist: 0
            }
        },
        watch: {
            employed: function () {
                var option = {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['拟升学', '参军', '已就业', '未就业', '专升本'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '人数',
                            type: 'bar',
                            barWidth: '25%',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            data: [this.attendSchool, this.enlist, this.employed, this.noEmployed, this.upgradeSpecialist]
                        }
                    ]
                }

                // 加载数据图表
                this.polar = option
            }
        },

        created () {
            this.getProfessionAndClassesDataCascaderOptions()
            this.getProfessionAndClassesLevelDataCascaderOptions()
            this.getUnemployedRateData()
        },
        methods: {
            getUnemployedRateData () {
                let self = this
                let data = {}
                data.classId = ''
                data.proId = ''
                var employed = 0
                var noEmployed = 0
                var enlist = 0
                var attendSchool = 0
                var upgradeSpecialist = 0
                let type = this.type
                if (type === 'getPro') {
                    data.proId = this.proId
                }
                if (type === 'getClass') {
                    data.classId = this.classId
                }
                this.utils.sendReq({
                    queryUrl: '/data/getUnemployedRate',
                    req: {
                        data: data,
                        method: 'post',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.employed = req.data.data.employed
                                self.noEmployed = req.data.data.noEmployed
                                self.enlist = req.data.data.enlist
                                self.attendSchool = req.data.data.attendSchool
                                self.upgradeSpecialist = req.data.data.upgradeSpecialist
                            }
                        }
                    }
                })
                employed = self.employed
                noEmployed = self.noEmployed
                enlist = self.enlist
                attendSchool = self.attendSchool
                upgradeSpecialist = self.upgradeSpecialist
                var option = {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['拟升学', '参军', '已就业', '未就业', '专升本'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '人数',
                            type: 'bar',
                            barWidth: '25%',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            data: [attendSchool, enlist, employed, noEmployed, upgradeSpecialist]
                        }
                    ]
                }

                // 加载数据图表
                this.polar = option
            },
            changeViewData () {
                // true就是专业，false就是班级
                if (this.isView) {
                    this.isView = false
                    this.placeholder = '试试搜索班级名吧'
                    this.tooltipContent = '切换到专业数据显示'
                    this.type = 'getPro'
                    this.getUnemployedRateData()
                } else {
                    this.isView = true
                    this.placeholder = '试试搜索专业名吧'
                    this.tooltipContent = '切换到班级数据显示'
                    this.type = 'getClass'
                    this.getUnemployedRateData()
                }
            },
            getPro () {
                let self = this
                self.type = 'getPro'
                this.getUnemployedRateData()
            },
            getClass () {
                let self = this
                self.type = 'getClass'
                this.getUnemployedRateData()
            },
            /** 获取专业 */
            getProfessionAndClassesDataCascaderOptions () {
                let self = this
                self.utils.sendReq({
                    queryUrl: 'professionalType/queryAll',
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.proOptions = req.data.data
                            }
                        }
                    }
                })
            },

            /** 获取班级 */
            getProfessionAndClassesLevelDataCascaderOptions () {
                let self = this
                self.utils.sendReq({
                    queryUrl: 'classRoom/queryAll',
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.classOptions = req.data.data
                            }
                        }
                    }
                })
            },
            /** 用户选择班级后获取数据 */
            changeDataView () {
                // false显示专业数据  true显示班级数据
                if (this.isView) {
                    this.isView = false
                    this.tooltipContent = '切换到专业数据显示'
                } else {
                    this.isView = true
                    this.tooltipContent = '切换到班级数据显示'
                }
            }
        }

    }
</script>

<style lang="less" scoped>
</style>
